<template>
    <div class="cart">
        <!-- <Tips /> -->
        <van-checkbox-group v-model="result">
            <van-checkbox :name="item" v-for="item in cartList" :key="item.id" @click="singleCheck">
                <van-card :num="item.number" :price="item.retail_price" :desc="item.goods_specifition_name_value" :title="item.goods_name" :thumb="item.list_pic_url" />
            </van-checkbox>
        </van-checkbox-group>

        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll" @click="checkallFn">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送,
                <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
// import Tips from "@/components/Tips";
import { getCartList } from '@/utils/https';
export default {
    data() {
        return {
            price: 0,
            result: [], //选中的商品集合
            cartList: [], //购物车商品列表
            checkAll: false, //默认不选中
        };
    },
    computed: {
        totalPrice() {
            let sum = 0;
            this.result.forEach(item => {
                sum += item.retail_price * item.number * 100;
            });
            return sum;
        },
    },
    created() {
        getCartList().then(res => {
            console.log(res);
            this.cartList = res.data.data.cartList;
        });
    },
    methods: {
        onSubmit() {
            // 提交订单
        },
        onClickEditAddress() {
            // 修改地址
        },
        checkallFn() {
            // 全选
            if (this.checkAll) {
                this.result = this.cartList;
            } else {
                // 全不 选
                this.result = [];
            }
        },
        singleCheck() {
            // 单选事件
            if (this.result.length == this.cartList.length) {
                this.checkAll = true;
            } else {
                this.checkAll = false;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.cart {
    width: 100%;
    height: 100%;
    .van-checkbox {
        display: flex;
        // 样式穿透
        /deep/.van-checkbox__label {
            flex: 1;
        }
    }
    .van-submit-bar {
        bottom: 50px;
    }
}
</style>
